@import "@{root-path}/base/variables.less";
@import "@{root-path}/base/mixins.less";

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  cursor: pointer;

  border: none;
  background: @grey-30;
  color: @ink-90;

  padding: 0.2em 2em 0.2em 0.2em;
  margin: 0;
  border-radius: 2px;

  background-image: url("@{image-path}/3.0/caret.svg");
  background-position: calc(100% - 7px) calc(50% + 1px);
  background-size: 8px;
  background-repeat: no-repeat;

  &:hover {
      background-color: @grey-40;
  }

  &:active {
      background-color: @grey-50;
  }

  &:focus {
      background-color: @white;
  }

  optgroup,
  option {
      background-color: @white;
  }
}
